<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
	<jsp:include page="/include.jsp"/>
	<style type="text/css">
	  /*区域模板样式*/
      .divClass{
         width:100%;
         height:235px;
         valign:top;
      }
      .div_borderClass{
        border:1px solid #cbcbcb;
        margin:5px 5px 5px 5px;
        background-color:#ffffff;
      }
	</style>
    <!-- 引入必须的js文件 -->
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/fusionchar/FusionCharts.js" charset="utf-8"></script>
	<script type="text/javascript">
	  var Interval;
	   $(document).ready(function(){
		   $('#framework_firstpage_dataDate').my97({
				  dateFmt:'yyyyMMdd',
				  startDate:[{
					 doubleCalendar:false,
					 isShowWeek:false,
					 isShowClear:false,
					 readOnly:true
				  }]
		   });
		   $('#framework_firstpage_dataDate').val(getDateStr(-1))
		   $('#framework_firstpage_rule_dataDate').my97({
				  dateFmt:'yyyyMMdd',
				  startDate:[{
					 doubleCalendar:false,
					 isShowWeek:false,
					 isShowClear:false,
					 readOnly:true
				  }]
		   });
		   $('#framework_firstpage_rule_dataDate').val(getDateStr(-1))
		     //初始化查询条件提示
			 $("#framework_firstpage_kpiName").val("指标名称");
			 $("#framework_firstpage_kpiName").css("color","#808080");
			 
			 $("#framework_firstpage_ruleName").val("规则名称");
			 $("#framework_firstpage_ruleName").css("color","#808080");
			 
			 $("#btnQuery").bind("click",function(){
				 loadKpiRun();
			 });
			 $("#btnRuleQuery").bind("click",function(){
				 loadRuleRun();
			 });
			//加载系统公告信息
			 $("#framework_firstpage_systemInfo_divId").load("${pageContext.request.contextPath}/firstPageAction!getTop10SystemInfoData.action",function(){});
			//加载待办任务列表数据
			 $("#framework_firstpage_taskListDivId").load("${pageContext.request.contextPath}/firstPageAction!getTaskList.action",function(){});
			
			loadKpiRun();//加载指标运行统计数据
			loadRuleRun();//加载规则运行统计数据
			//每个3秒自动滚动
			Interval=setInterval('AutoScroll("#framework_firstpage_systemInfo_divId")',2000);

	   });
	 //加载指标统计数据
	 function loadKpiRun(){
		var pars="";
		var kqiName=$("#framework_firstpage_kpiName").val();
		var dataDate=$("#framework_firstpage_dataDate").val()
		 if(kqiName=='指标名称'){
			 kqiName="";
		 }
	     $.ajax({
			 url :'${pageContext.request.contextPath}/firstPageAction!getKpiStatisticFusioncharData.action',
			 data:{"kqiName":kqiName,"dataDate":dataDate},
			 cache : true,
			 success : function(data){
				  //加载环形数据
			     var   trend1 = new FusionCharts("${pageContext.request.contextPath}/js/fusionchar/charts/Doughnut2D.swf", "",$('#framework_firstpage_kpirun_fusioncharId').width(), $('#framework_firstpage_kpirun_fusioncharId').height(), "0", "1");
					   trend1.setDataXML(data);
					   trend1.addParam("wmode","Opaque");
					   trend1.render("framework_firstpage_kpirun_fusioncharId");
			 }
	     });
		//加载指标运行统计表格数据
	    $("#framework_firstpage_kpiruntableId").load("${pageContext.request.contextPath}/firstPageAction!getKpiStatisticTableData.action",{"kqiName":kqiName,"dataDate":dataDate},function(){ $(".kpiTableClass").zebra({hover:true});});
	 }
	 //加载规则统计数据
	 function loadRuleRun(){
		 var pars="";
		 var ruleName=$("#framework_firstpage_ruleName").val();
		 var dataDate=$("#framework_firstpage_rule_dataDate").val();
		 var periodType=$("#framework_firstpage_rule_periodType").val();
		     if(ruleName=='规则名称'){
		    	 ruleName="";
		     }
		     if(dataDate.length>0){
		    	 dataDate=dataDate;
		     }else{
		    	 dataDate=getDateStr(0);
		     }
	     $.ajax({
			 url :'${pageContext.request.contextPath}/firstPageAction!getRuleList.action',
			 data:{"periodType":periodType,"ruleName":ruleName,"dataDate":dataDate},
			 cache : true,
			 success : function(data){
				  //加载柱形图数据
			      var trend1 = new FusionCharts("${pageContext.request.contextPath}/js/fusionchar/charts/MSColumn2D.swf", "",$('#framework_firstpage_rulerunfusioncharId').width(), $('#framework_firstpage_rulerunfusioncharId').height(), "0", "1");
					  trend1.setDataXML(data);
					  trend1.addParam("wmode","Opaque");
					  trend1.render("framework_firstpage_rulerunfusioncharId");
			 }
	     });
		  //加载指标运行统计表格数据
		 $("#framework_firstpage_rule_runtableId").load("${pageContext.request.contextPath}/firstPageAction!getRuleTableList.action",{"periodType":periodType,"ruleName":ruleName,"dataDate":dataDate},function(){$(".RuleTableClass").zebra({hover:true});}); 
	  }
	  function AutoScroll(obj){
			$(obj).find("div:first").animate({marginTop:"-40px"},500,function(){
				$(this).find("table:first").css({"background":""});//清空CSS样式
				$(this).css({"marginTop":"8px"}).find("table:first").appendTo(this);
				$(this).find("table:first").css({"background":"#d1d1d4"});
			});
	   }
	   //启动或停止计时器
	   function startOrEndInterval(idx){
		   if(idx==1){//停止
			   clearInterval(Interval); 
		   }else{//启动
			   Interval=setInterval('AutoScroll("#framework_firstpage_systemInfo_divId")',2000);
		   }
	   }
	   //周期类型改变
	   function ChangePeriodType(){
	 	   var value=$("#framework_firstpage_periodType").val();
	 	  $("#framework_firstpage_dataDate").val("");//清空数据
	 	   if(value==3){//日
	 		   $("#framework_firstpage_dataDate").my97({
	 	   	         dateFmt:'yyyyMMdd',
	 	   	         width:120,
	 		   	     startDate:[{
	 		   			 doubleCalendar:false,
	 		   			 isShowWeek:false,
	 		   			 isShowClear:false,
	 		   			 readOnly:true
	 		   	     }]
	 	        });
	 	   }else if(value==2){//月
	 		   $("#framework_firstpage_dataDate").my97({
	 	   	         dateFmt:'yyyyMM',
	 		   	     startDate:[{
	 		   			 doubleCalendar:false,
	 		   			 isShowWeek:false,
	 		   			 isShowClear:false,
	 		   			 readOnly:true
	 		   	     }]
	 	        });
	 	   }else{//时
	 		   $("#framework_firstpage_dataDate").my97({
	 	   	         dateFmt:'yyyyMMddHH',
	 		   	     startDate:[{
	 		   			 doubleCalendar:false,
	 		   			 isShowWeek:false,
	 		   			 isShowClear:false,
	 		   			 readOnly:true
	 		   	     }]
	 	        });
	 	   }
	    }
	   //周期类型改变
	   function Change_Rule_PeriodType(){
	 	   var value=$("#framework_firstpage_rule_periodType").val();
	 	   $("#framework_firstpage_rule_dataDate").val("");//清空数据
	 	   if(value==3){//日
	 		   $("#framework_firstpage_rule_dataDate").my97({
	 	   	         dateFmt:'yyyyMMdd',
	 	   	         width:120,
	 		   	     startDate:[{
	 		   			 doubleCalendar:false,
	 		   			 isShowWeek:false,
	 		   			 isShowClear:false,
	 		   			 readOnly:true
	 		   	     }]
	 	        });
	 	   }else if(value==2){//月
	 		   $("#framework_firstpage_rule_dataDate").my97({
	 	   	         dateFmt:'yyyyMM',
	 		   	     startDate:[{
	 		   			 doubleCalendar:false,
	 		   			 isShowWeek:false,
	 		   			 isShowClear:false,
	 		   			 readOnly:true
	 		   	     }]
	 	        });
	 	   }else{//时
	 		   $("#framework_firstpage_rule_dataDate").my97({
	 	   	         dateFmt:'yyyyMMddHH',
	 		   	     startDate:[{
	 		   			 doubleCalendar:false,
	 		   			 isShowWeek:false,
	 		   			 isShowClear:false,
	 		   			 readOnly:true
	 		   	     }]
	 	        });
	 	   }
	    }
	 //格式化日期函数:日
	   function getDateStr(AddDayCount) {
		    var dd = new Date();
		    dd.setDate(dd.getDate()+AddDayCount);//获取AddDayCount天后的日期
		    var y = dd.getFullYear();
		    var m = dd.getMonth()+1;//获取当前月份的日期
		    if(m<=9){
		    	m="0"+m;
		    }
		    var d = dd.getDate();
		    if(d<=9){
		    	d="0"+d;
		    }
		    return y+m+d;
	   }
	</script>
</head> 
<body>
     <table width="100%" style="background-color:#f8f8f8;" >
         <tr>
            <!-- 任务列表数据展示 -->
            <td class="divClass">
                <table style="width:100%;height:100%">
                   <tr>
                      <td style="width:35%;" valign="top">
                         <div id="framework_firstpage_taskListDivId" class="div_borderClass"></div>
                      </td>
                      <td style="width:65%;" valign="top">
                        <div class="div_borderClass">
                             <table style="width:100%">
	                            <tr>
	                               <td style="width:40%;height:30px" valign="top" nowrap="nowrap">
	                                   <img title="查看指标运行统计" src="${pageContext.request.contextPath}/images/firstpage/kpi_run_statistic.png" style="width:28px;height:28spx;margin-top:2px;margin-left:5px;float:left"/>
		                               <div style="font-size:15px;margin-top:8px;float:left">&nbsp;指标运行统计</div>
	                               </td>
	                               <td style="width:60%;" valign="middle">
	                                    <table align="right">
	                                        <tr>
	                                          <td>
	                                              <input type="text" id="framework_firstpage_kpiName" name="kpiName" value="" style="width:120px"  onfocus="this.value=''"/>&nbsp;
	                                          </td>
	                                          <td>
	                                             <select  id="framework_firstpage_periodType"  name="periodType"   style="width:40px;margin-right:2px;" onchange="ChangePeriodType()">
														<option value="3" selected="selected">日</option>
														<option value="2">月</option>
														<option value="4">时</option>
							                     </select>&nbsp;
	                                          </td>
	                                          <td>
	                                             <input type="date" id="framework_firstpage_dataDate" name="dataDate" style="width:140px"/>&nbsp;
	                                          </td>
	                                          <td>
	                                              <input type="button" id="btnQuery" name="" value="查 询" style="cursor:pointer;background-image: url('${pageContext.request.contextPath}/images/login/search.png');background-repeat: no-repeat;width:67px;height:23px;padding-left:12px;border:none;color:white;font-family:微软雅黑;margin-right:10px;"/>
	                                          </td>
	                                       </tr>
                                      </table>
	                               </td>
	                            </tr>
	                            <tr>
	                               <td valign="top">
	                                   <div id="framework_firstpage_kpirun_fusioncharId" style="width:100%;height:205px"></div>
	                               </td>
	                               <td valign="top">
	                                  <div id="framework_firstpage_kpiruntableId" style="width:97%;height:205px;border:1px solid #ccc;margin-right:10px;margin-bottom:8px"></div>
	                               </td>
	                            </tr>
                          </table>
                        </div>
                      </td>
                   </tr>
                </table>
            </td>
         </tr>
          <tr>
            <!-- 规则运行统计展示 -->
            <td class="divClass" valign="top" style="height:200px">
               <div class="div_borderClass">
                 <table style="width:100%;height:100%">
                   <tr>
                     <td style="width:50%" valign="top" >
                        <table style="width:100%" >
                            <tr>
                               <td style="width:100%;height:30px;" valign="top" nowrap="nowrap">
                                   <img title="查看规则运行统计" src="${pageContext.request.contextPath}/images/firstpage/rule_run_statistic.png" style="width:28px;height:28px;margin-top:5px;margin-left:5px;float:left"/>
	                               <div style="font-size:15px;margin-top:12px;float:left">&nbsp;规则运行统计</div>
                               </td>
                            </tr>
                            <tr>
                               <td style="width:100%;" valign="top">
                                  <div id="framework_firstpage_rulerunfusioncharId"  style="width:100%;height:180px"></div>
                               </td>
                            </tr>
                         </table>
                     </td>
                     <td style="width:50%" valign="top">
                          <table style="width:100%" >
                            <tr>
                               <td style="width:100%;text-align:right;height:30px" valign="middle">
                                   <table align="right">
	                                        <tr>
	                                          <td>
	                                              <input type="text" id="framework_firstpage_ruleName" name="ruleName" value="" style="width:120px"  onfocus="this.value=''"/>&nbsp;
	                                          </td>
	                                          <td>
	                                             <select  id="framework_firstpage_rule_periodType"  name="periodType"   style="width:40px;margin-right:2px;" onchange="Change_Rule_PeriodType()">
														<option value="3" selected="selected">日</option>
														<option value="2">月</option>
														<option value="4">时</option>
							                     </select>&nbsp;
	                                          </td>
	                                          <td>
	                                             <input type="date" id="framework_firstpage_rule_dataDate" name="dataDate" style="width:140px"/>&nbsp;
	                                          </td>
	                                          <td>
	                                             <input type="button" id="btnRuleQuery" name="" value="查 询" style="cursor:pointer;background-image: url('${pageContext.request.contextPath}/images/login/search.png');background-repeat: no-repeat;width:67px;height:23px;padding-left:12px;border:none;color:white;font-family:微软雅黑;margin-right:10px;"/>	
	                                          </td>
	                                       </tr>
                                      </table>
                               </td>
                            </tr>
                            <tr>
                               <td style="" valign="top">
                                  <div id="framework_firstpage_rule_runtableId" class="div_borderClass" style="margin-right:10px;height:180px;border-bottom:none"></div>
                               </td>
                            </tr>
                         </table>
                     </td>
                   </tr>
                 </table>
               </div>
            </td>
         </tr>
          <tr>
            <!--系统公告展示 -->
            <td style="height:160px;width:100%" valign="top">
                <div class="div_borderClass">
                   <table width="100%" height="160px">
                     <tr>
                        <td valign="middle" style="width:40px;height:160px;background:#8cbeed;text-align:center">
                             <div style="line-height:30px;width:20px;margin-left:10px;margin-right:5px;font-size:15px;color:#FFFFFF;overflow:hidden;font-weight:600">系统公告</div>
                        </td>
                        <td style="width:96%;height:160px" valign="top">
                           <table width="100%" height="160px">
                                <tr>
                                    <td valign="middle" style="width:100%;height:30px;background:#f1f3eb;text-align:left">
                                      &nbsp;&nbsp;<font style="color:red;font-size:15px;">★★★</font><font style="font-size:15px;font-weight:600;color:#219ad7">系统公告内容</font><font style="color:red;font-size:15px;">★★★</font>
                                    </td>
                                </tr>
                                 <tr>
                                    <td valign="top" style="width:100%;height:130px;">
                                        <div id="framework_firstpage_systemInfo_divId" style="width:100%;height:130px;overflow:hidden" onmouseover="startOrEndInterval(1)" onmouseout="startOrEndInterval(2)"></div></br>
                                    </td>
                                </tr>
                           </table>
                        </td>
                    </tr>
                  </table>
               </div>
            </td>
         </tr>
     </table>
</body>
</html>
